import React from 'react';
import {Card} from 'antd';
import echartTheme from '../themeLight';
// import echarts from 'echarts'; 全部导入
import echarts from 'echarts/lib/echarts'; //按需导入

// 导入饼图
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import ReactEcharts from 'echarts-for-react'

export default class Pie extends React.Component{

    componentWillMount() {
        echarts.registerTheme('hyyqc',echartTheme)
    };

    getOption = () => {
        let option = {
            title:{
                text:'用户骑行订单',
                x:'center'  // 标题水平方向居中
            },
            legend:{
                orient:'vertical', // 垂直方向 默认是水平
                right:10,
                top:20,
                bottom:20,
                data:['周一','周二','周三','周四','周五','周六','周日']
            },
            tooltip:{
              trigger:'item',
              formatter:'{a}<br/>{b}:{c}({d}%)'  //自定义
            },
            series:[
                {
                    name:'订单量',
                    type:'pie',
                    data:[
                        {
                            value:1000,
                            name:'周一'
                        },
                        {
                            value:10,
                            name:'周二'
                        },
                        {
                            value:50,
                            name:'周三'
                        },
                        {
                            value:100,
                            name:'周四'
                        },
                        {
                            value:9000,
                            name:'周五'
                        },
                        {
                            value:3000,
                            name:'周六'
                        },
                        {
                            value:500,
                            name:'周日'
                        },
                    ]
                }
            ]
        };
        return option
    };

    getOption2 = () => {
        let option = {
            title:{
                text:'用户骑行订单',
                x:'center'
            },
            legend:{
                orient:'vertical',
                right:10,
                top:20,
                bottom:20,
                data:['周一','周二','周三','周四','周五','周六','周日']
            },
            tooltip:{
                trigger:'item',
                formatter:'{a}<br/>{b}:{c}({d}%)'
            },
            series:[
                {
                    name:'订单量',
                    type:'pie',
                    radius:['50%','80%'],
                    data:[
                        {
                            value:1000,
                            name:'周一'
                        },
                        {
                            value:10,
                            name:'周二'
                        },
                        {
                            value:50,
                            name:'周三'
                        },
                        {
                            value:100,
                            name:'周四'
                        },
                        {
                            value:9000,
                            name:'周五'
                        },
                        {
                            value:3000,
                            name:'周六'
                        },
                        {
                            value:500,
                            name:'周日'
                        },
                    ]
                }
            ]
        };
        return option
    };

    getOption3 = () => {
        let option = {
            title:{
                text:'用户骑行订单',
                x:'center'
            },
            legend:{
                orient:'vertical',
                right:10,
                top:20,
                bottom:20,
                data:['周一','周二','周三','周四','周五','周六','周日']
            },
            tooltip:{
                trigger:'item',
                formatter:'{a}<br/>{b}:{c}({d}%)'
            },
            series:[
                {
                    name:'订单量',
                    type:'pie',
                    data:[
                        {
                            value:1000,
                            name:'周一'
                        },
                        {
                            value:2000,
                            name:'周二'
                        },
                        {
                            value:3000,
                            name:'周三'
                        },
                        {
                            value:4000,
                            name:'周四'
                        },
                        {
                            value:9000,
                            name:'周五'
                        },
                        {
                            value:3000,
                            name:'周六'
                        },
                        {
                            value:5000,
                            name:'周日'
                        },
                    ].sort((a,b) => {
                        return a.value - b.value;
                    }),
                    roseType:'radius'
                }
            ]
        };
        return option
    };

    render() {
        return (
            <div className="wrap">
                <Card title="饼图表之一">
                    <ReactEcharts option={this.getOption()} theme="hyyqc" style={{height:500}}/>
                </Card>
                <Card title="饼图表之二" style={{marginTop:20}}>
                    <ReactEcharts option={this.getOption2()} theme="hyyqc" style={{height:500}}/>
                </Card>
                <Card title="饼图表之三" style={{marginTop:20}}>
                    <ReactEcharts option={this.getOption3()} theme="hyyqc" style={{height:500}}/>
                </Card>
            </div>
        )
    }
}